<div ng-controller="AlgebraCtrl" ng-init="init()">
  <form class="form-horizontal">
    <!--
    <div class="control-group">
      <label class="control-label" for="rimeDirectory">Rime 文件夾</label>
      <div class="controls">
        <input type="text" ng-model="rimeDirectory" placeholder="Rime 用戶文件夾的路徑">
      </div>
    </div>
    -->
    <div class="control-group">
      <label class="control-label" for="schemaId">輸入方案</label>
      <div class="controls">
        <input type="text" ng-model="schemaId" placeholder="Rime 輸入方案標識">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="configKey">設定項</label>
      <div class="controls">
        <div class="input-append">
          <input type="text" ng-model="configKey"
                 typeahead="key for key in configKeys | filter:$viewValue"
                 placeholder="以 / 分隔的鍵值">
          <button class="btn btn-primary" ng-click="loadSchema()">載入設定</button>
        </div>
      </div>
    </div>
    <div class="control-group" ng-show="isProjector && rules.length">
      <label class="control-label" for="dictName">詞典</label>
      <div class="controls">
        <div class="input-append">
          <input type="text" ng-model="dictName" placeholder="與輸入方案關聯的詞典名">
          <button class="btn" ng-click="loadDict()">載入音節表</button>
        </div>
      </div>
    </div>
    <div class="control-group" ng-show="isFormatter">
      <label class="control-label" for="testString">測試文字</label>
      <div class="controls">
        <input type="text" ng-model="testString" ng-trim="false" ng-change="calculate()">
      </div>
    </div>
  </form>
  <alert class="span3 offset2" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
  <table class="table table-bordered table-striped" ng-show="rules.length">
    <tr ng-repeat="rule in rules">
      <td ng-click="rules.selectedIndex = $index">
        <div class="code error-{{rule.error}}">{{rule.formula}}</div>
        <query update="querySpellings($index, query)" visible="{{isProjector && rules.selectedIndex == $index}}"></query>
      </td>
      <td ng-show="isProjector">
        <diff class="code" type="script" value="rule.queryResult"></diff>
      </td>
      <td ng-show="isFormatter">
        <diff class="code" value="rule.spelling"></diff>
      </td>
    </tr>
  </table>
</div>
